<template>
	<view>
		<view class="top">
			
			<image @click="showDrawer" src="/static/img/menu.png" mode="aspectFit"></image>
			<!-- 左侧边栏抽屉 -->
			<uni-drawer ref="drawer" mode="left" :mask="true" :maskClick="true">
				<!-- 列表组件 -->
				<uni-list>
					<uni-list-item 
					title="首页" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/index/index"
					></uni-list-item>
				</uni-list>
				
				<uni-list>
					<uni-list-item 
					title="品牌馆" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/brands/brands"
					></uni-list-item>
				</uni-list>
				
				<uni-list>
					<uni-list-item 
					title="分类" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/category/category"
					></uni-list-item>
				</uni-list>
				
				<uni-list>
					<uni-list-item 
					title="个人中心" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/user-center/user-center"
					></uni-list-item>
				</uni-list>
				
				<uni-list>
					<uni-list-item 
					title="登录" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/user-center/user-center"
					></uni-list-item>
				</uni-list>
				
				<uni-list>
					<uni-list-item 
					title="注册" note="" 
					:showArrow="true"
					:clickable="true"
					link="switchTab"
					to="/pages/user-center/user-center"
					></uni-list-item>
				</uni-list>
			</uni-drawer>
			<!-- 搜索框 -->
			<view class="search">
				<input type="text" value="" placeholder="请输入商品关键字" class="inp" @click="goSearch" :disabled="true"/>
				<image class="searchIcon" src="../../static/img/search.png" mode=""></image>
			</view>
			<text @click="jumpToLogin" v-if="isNotLogin">登录</text>
			<text @click="goUserCenter" v-if="!isNotLogin">{{uname}}</text>
			
		</view>
		<!-- 轮播图 -->
<view class="swiper-box" >
	<swiper class="" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000" :circular="true">
		<swiper-item v-for="item in idata.carouselItems" :key="item.cid">
			<view class="swiper-item">
				<image :src="$url.baseURL+item.img" mode="widthFix"></image>
			</view>
		</swiper-item>
	</swiper>
</view>
	</view>
</template>

<script>
	export default {
		props:{
			uname:{
				type:String,
				default:''
			},
			idata:{
				type:Object,
				default:null,
			},
			isNotLogin:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
			};
		},
		methods:{
			goUserCenter(){
				uni.switchTab({
					url:'../../pages/user-center/user-center'
				})
			},
			goSearch(){
				uni.navigateTo({
					url:"../../pages/product-search/product-search"
				})
			},
			jumpToLogin(){
				//跳转（页签切换）到用户中心
				uni.switchTab({
					url:"/pages/user-center/user-center"
				})
			},
			showDrawer(){
				this.$refs.drawer.open()
			},
		},
		mounted() {
			
			
		}
	}
</script>

<style lang="scss">
:not(not){
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.top{
	
	background-color: #0aa1ed;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 10rpx;
	image{
		width: 45rpx;
		height: 45rpx;
	}
	.search{
		position: relative;
	}
	.inp{
		background-image: url(../../static/img/logo-s.png);
		background-repeat: no-repeat;
		background-size:8%;
		background-position: 5%;
		height: 60rpx;
		margin-top: 10rpx;
		border-radius: 45px;
		background-color: white;
		padding: 5rpx 100rpx;
		text-align: center
	}
	
	text{
		font-size: 24rpx;
		color: white;
	}
	.searchIcon{
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 5%;
		top: 17rpx;
	}
}
.swiper-box{
	background-image: linear-gradient(180deg,#0aa1ed,#f5f5f5 50%);
	padding: 5rpx 20rpx;
	swiper{
		height: 284rpx;
		border-radius: 10rpx;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
}
 // .banner{
	// // height: 310rpx;
	// background-image: linear-gradient(180deg,#0aa1ed,#f5f5f5 50%);
	// .swiper-item{
	// 	display: flex;
	// 	// background-color: red;
	// 	justify-content: center;
	// 	padding: 10rpx;
	// }
	// image{
	// 	display: inline-block;
	// 	border-radius: 8px;
	// 	 width: 98%;
	// }
// }
</style>
